<template>
<el-dialog title="找回密码" width="30%" v-model:visible="dialogVisible" 
           :show-close="true" :close-on-click-modal="false" :before-close="handleClose">
  <div class="reset-pwd-box">
          <!-- 表单区域 -->
      <el-form class="reset_pwd_form" :model="resetPwdForm" :rules="resetPwdRules" ref="resetPwdFormRef">
        <p class="reset-pwd-head">重置密码</p>
        <!-- 手机号 -->
        <el-form-item label="手机号" class="color-item" prop="phone" id="phone" :rules="resetPwdRules.phone">
          <el-input type="number" v-model="resetPwdForm.phone" placeholder="手机号"
                    prefix-icon="el-icon-mobile-phone"></el-input>
        </el-form-item>
        <!-- 手机验证码 -->
        <el-form-item label="验证码" class="color-item" prop="phone-code" id="phone-code" :rules="resetPwdRules.phone_code">
          <el-input type="password" v-model="resetPwdForm.phone_code" placeholder="验证码"
                    prefix-icon="el-icon-document-checked"></el-input>
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item label="新密码" class="color-item" prop="new-pwd" id="new-pwd" :rules="resetPwdRules.new_pwd">
          <el-input type="password" v-model="resetPwdForm.new_pwd" placeholder="新密码"
                    prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item label="确认密码" class="color-item" prop="confirm-pwd" id="confirm_pwd" :rules="resetPwdRules.confirm_pwd">
          <el-input type="password" v-model="resetPwdForm.confirm_pwd" placeholder="确认密码"
                    prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>

        <!--按钮区域-->
        <el-form-item class="btns">
          <el-button type="submit" class="btn-reset-pwd" @click="handleResetPwd">提交</el-button>
          <el-button type="cancel" class="btn-cancel" @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
  </div>
  
</el-dialog>
</template>

<script>
export default {
  name: "ResetPwd",
  data() {
    const validatePhone = (rule, value, callback) => {
       if (value === "") {
         callback(new Error('请输手机号'))
       } else if (value.length !== 11) {
         callback(new Error('请输手11位数机号'))
      } else {
         callback()
       }
     }
     const validatePhoneCode = (rule, value, callback) => {
       if (value === "" || value.length !== 6) {
         callback(new Error('请输入6位手机验证码'))
       } else {
         callback()
       }
     }
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error('请输入密码'))
      } else if (value.length < 8 || value.length > 20) {
        callback(new Error('请输入8-20位密码'))
      } else {
        callback()
      }
    }
    const validateConfirmPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error('请输入确认密码'))
      } else if (value.length < 8 || value.length > 20) {
        callback(new Error('请输入8-20位密码'))
      } else if (value !== this.resetPwdForm.new_pwd) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      resetPwdForm: {
        phone: '',
        phone_code: '',
        new_pwd: ''
      },
      resetPwdRules: {
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'},
          {required: true, trigger: 'blur', validator: validatePhone}],
        phone_code: [
          {required: true, message: '请输入手机验证码', trigger: 'blur'},
          {min: 6, max: 6, message: '长度为6个字符', trigger: 'blur'},
          {required: true, trigger: 'blur', validator: validatePhoneCode}],
        new_pwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur'},
          {required: true, trigger: 'blur', validator: validatePassword}],
        confirm_pwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur'},
          {required: true, trigger: 'blur', validator: validateConfirmPwd}]
      },
      dialogVisible: false,
      capsTooltip: false,
      loading: false,
      showDialog: false,
      showEditBtn: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  methods: {
    handleResetPwd(){

    },
    handleCancel() {
      this.$router.push('home')
    },
    handleClose() {
      this.$confirm('确认关闭？').then(() => {
        console.log('确定')
      }).catch(() => {
        console.log('取消')
      })
    }
  }
}
</script>

<style>
.reset-pwd-box {
  width: 40%;
  height: 600px;
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translate(-50%, 50%);
  background: #00000090;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
}

.color-item .el-form-item__label {
  margin-left: -40%;
  width: 40%;
  color: lightgreen;
}

.reset_pwd_form {
  margin-top: 20%;
}

#phone, #phone-code, #new-pwd, #confirm_pwd {
  width: 50%;
  margin: 25px auto;
}

.btn-reset-pwd, .btn-cancel {
  width: 20%;
  position: inherit;
}

.reset-pwd-head {
  color: #FFD700
}
</style>